<template>
	<view class="content">
		<dlContacts ref="jContacts" :myList="myList" @confirm="contactsConfirm"></dlContacts>
		<view class="alert-wrapper center" :style="{'left':alertTop}" @tap="changealert()">
			<view class="alert-inner center colum">
				<view class="f34">
					创建群组
				</view>
				<view class="input_box">
					<input type="text" placeholder="请输入群组名" v-model="name" @tap.stop=""/>
					<input type="text" placeholder="请输入群组描述" v-model="desc" @tap.stop=""/>
				</view>
				<view class="btn center cfff f30" @tap.stop="roomAdd">
					确定
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import dlContacts from '@/components/dl-contacts/dl-contacts.vue';
import SKIMSDK from '@/common/xmpp-sdk.js'
export default {
	components: {
		dlContacts
	},
	data() {
		return {
			alertTop:'100%',
			myList: [],
			name:'',
			desc:'',
			text:[]
		};
	},
	onShow() {
		this.getFriendList()
	},
	methods: {
		roomAdd(){
			if(this.name==''){
				this.$sToast('群组名称不能为空')
				return
			}
			if(this.desc==''){
				this.$sToast('群组描述不能为空')
				return
			}
			if(this.text.length==0){
				this.$sToast('群组成员不能为空')
				return
			}
			this.$ajax(this.apiList.roomAdd, {
				name: this.name,
				desc:this.desc,
				text:JSON.stringify(this.text),
				jid:SKIMSDK.randomUUID()
			}).then(res => {
				this.$sToast('创建成功')
				this.$back()
			});
		},
		getFriendList() {
			const that = this;
			this.$ajax(this.apiList.friendsList, {
				userId: uni.getStorageSync('userinfo').userId
			}).then(res => {
				res.data = res.data.filter(item => {
					return item.toNickname != '客服公众号';
				});
				this.myList = res.data;
				setTimeout(function() {
					that.$refs.jContacts.show();
				}, 300);
			});
		},
		contactsConfirm(res) {
			console.log(res);
			res.map(item=>{
				this.text.push(item.toUserId)
			})
			this.changealert()
		},
		changealert() {
			this.alertTop==0?this.alertTop='100%':this.alertTop=0
		}
	}
};
</script>
<style lang="scss">
	.alert-inner{
		width:674rpx;
		height:431rpx;
		background:rgba(255,255,255,1);
		border-radius:12rpx;
		margin-top: 120rpx;
		.btn{
			width:630rpx;
			height:80rpx;
			background:rgba(2,151,254,1);
			border-radius:4rpx;
			margin-top: 20rpx;
		}
		.input_box{
			width:630rpx;
			height:202rpx;
			background:rgba(242,243,245,1);
			border-radius:8rpx;
			input{
				height: 83rpx;
				line-height: 83rpx;
				margin: 0 20rpx;
				border-bottom: 1rpx solid #E0E0E0;
			}
		}
		.f34{
			margin: 30rpx auto 37rpx;
		}
	}
</style>
